<template>
  <div id="container">
    <dv-scroll-board :config="config" class="chart" @mouseover="mouseoverHandler" @click="clickHandler" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getMerchants } from '@/common/api';
let config = reactive({
  rowNum: 5,
  align: ['center', 'center', 'center'],
  headerBGC: '#0000003F',
  oddRowBGC: '#96D1FF5F',
  evenRowBGC: '#383E4C8F',
  header: ['公司名'],
  data: [
    ['', ''],
    ['', ''],
    ['', ''],
    ['', ''],
    ['', ''],
    ['', ''],
    ['', ''],
    ['', ''],
  ],
  rowsData: [],
})

onMounted(() => {

  getMerchants().then((res) => {
    res.data.forEach((item) => {
      let t = [item.merchantName];
      config.rowsData.push(t);
      config.data = config.rowsData;
    });
    config = { ...config };
  });
})

const mouseoverHandler = (e: any) => {
  console.log(e)
}

const clickHandler = (e: any) => {
  console.log(e)
}
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.chart {
  width: 80%;
  height: 90%;
}

::v-deep .header-item {
  font-size: 14px;
  height: 40px !important;
  line-height: 40px !important;
}

::v-deep .dv-scroll-board .rows .row-item {
  font-size: 14px !important;
}
</style>